<template>
  <div>
    <div class="data">
      <el-form :inline="true" :moodel="params" style="margin-left: 10px">
        <el-form-item label="标题">
          <el-input v-model="params.title" placeholder="按标题查找" class="select">
          </el-input>
        </el-form-item>
        <el-form-item style="margin-left: 33px; margin-top: 15px">
          <el-button icon="el-icon-search" type="primary" @click="getList(1)">查询</el-button>
          <el-button icon="el-icon-plus" type="success" @click="add">新增</el-button>
          <el-button icon="el-icon-delete" type="danger" @click="removeMore()">批量删除</el-button>       
        </el-form-item>
      </el-form>
      <el-table :data="rows" stripe style="width: 100%" @selection-change="SelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="img" label="图片" width="180">
          <template slot-scope="scope">
            <img style="width: 40px; height: 40px;" v-if="scope.row.img" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="url" label="跳转地址" width="200"></el-table-column>
        <el-table-column prop="status" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#aaaaaa"
              @change="statusChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="primary" style="margin-right:15px" @click="edit(scope.row)">编辑</el-button>
          <el-popconfirm
            title="确定删除此数据吗？"
            @confirm="remove(scope.row)"
            >
            <el-button icon="el-icon-delete" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChange"
        @current-change="getList"
        :current-page="params.pageNum"
        :page-sizes="[10, 20, 100, 200, 300, 400]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <CategoryEdit @load="getList" ref="categoryEditer"></CategoryEdit>
  </div>
</template>


<script>
import CategoryEdit from './categoryEdit.vue'
export default{
  name: "shouyeCategory",
  components: {
    CategoryEdit
  },
  beforeRouteEnter(to, from, next) {
    console.log('离开当前页面')
    next()
  },
  data() {
    return {
      //查询参数
      params: {
        title: '',
        type:'category',
        pageNum: 1,
        pageSize: 10,
      },
      rows: [],
      total: 0,
      selected:[]
    };
  },
  methods: {
    //获取列表
    getList(pageNum) {
      if (pageNum) this.params.pageNum = pageNum;
      this.$http({
        url: '/admin/index',
        params: this.params,
      }).then((res) => {
        this.total = res.total;
        this.rows = res.rows;
      });
    },
    add(){
      this.$refs.categoryEditer.add()
    },
    edit(row){
      this.$refs.categoryEditer.edit(row)
    },

    //启用 停用
    statusChange(row) {
      this.$http({
        url: '/admin/index',
        method: 'PUT',
        data: {
          indexId: row._id,
          status: row.status
        }
      }).then((res) => {
        if (res.errorMsg) {
          this.getList();
        }
      });
    },
    //修改pageSize
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNum = 1;
      this.getList();
    },

    //删除
    remove(row){
      this.$http({
        url: '/admin/index',
        method:'DELETE',
        params: {indexId:row._id},
      }).then((res) => {
        if (!res.errorMsg) {
          this.getList(1)
        }
      })
    },
    SelectionChange(rows) {
      //存储选中的数据
      this.selecteds = rows;
    },
    //批量删除
    removeMore(){
      //获取选中的数据
      let checkedRowsPromise = []
      let success = [], fail = []
      for(let i = 0; i < this.selecteds.length; i ++){
        checkedRowsPromise.push(
          new Promise(resovle => {
            let row = this.selecteds[i]
            this.$http({
              url: '/admin/index',
              method:'DELETE',
              params: {indexId:row._id},
            }).then((res) => {
              if (!res.errorMsg) {
                success.push(row._id)
              }else{
                fail.push(row._id)
              }
              resovle()
            })
          })
        )
      }
      this.$confirm('此操作将删除选中的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除
        Promise.all(checkedRowsPromise).then(() => {
          this.$message({
            message:`批量删除完成，成功删除${success.length}条数据，删除失败${fail.length}条数据`,
            duration:3000
          });
          this.getList(1)
        })
      })
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>

<style>
.select {
  width: 160px;
	height: 40px;
  font-size: 15px;
	color: #e9e9e9;
  margin-top: 14px;
}
</style>